<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>HTML accessibility: Task 1</title>
    <link rel="stylesheet" href="../styles.css" />
    <style>
      * {
        box-sizing: border-box;
      }
    </style>

    <style class="editable">
      .button {
        color: white;
        background-color: blue;
        border-radius: 10px;
        width: 170px;
        padding: 10px;
        text-align: center;
      }
    </style>
  </head>

  <body>
    <section class="preview">

      <font size="7">Need help?</font>
      <br><br>
      If you have any problems with our products, our  support center can offer you all the help you need, whether you want:
      <br><br>
      1. Advice choosing a new product
      <br>
      2. Tech support on an existing product
      <br>
      3. Refund and cancellation assistance
      <br><br>
      <font size="5">Contact us now</font>
      <br><br>
      Our help center contains live chat, e-mail addresses, and phone numbers.
      <br><br>
      <div class="button">Find Contact Details</div>
      <br>
      <font size="5">Find out answers</font>
      <br><br>
      Our Forums section contains a large knowledge base of searchable previously asked questions, and you can always ask a new question if you can't find the answer you're looking for.
      <br><br>
      <div class="button">Access Forums</div>

    </section>

    <textarea class="playable playable-css" style="height: 130px;">
.button {
  color: white;
  background-color: blue;
  border-radius: 10px;
  width: 170px;
  padding: 10px;
  text-align: center;
}
    </textarea>

    <textarea class="playable playable-html" style="height: 220px;">
<font size="7">Need help?</font>
<br><br>
If you have any problems with our products, our  support center can offer you all the help you need, whether you want:
<br><br>
1. Advice choosing a new product
<br>
2. Tech support on an existing product
<br>
3. Refund and cancellation assistance
<br><br>
<font size="5">Contact us now</font>
<br><br>
Our help center contains live chat, e-mail addresses, and phone numbers.
<br><br>
<div class="button">Find Contact Details</div>
<br>
<font size="5">Find out answers</font>
<br><br>
Our Forums section contains a large knowledge base of searchable previously asked questions, and you can always ask a new question if you can't find the answer you're looking for.
<br><br>
<div class="button">Access Forums</div>
    </textarea>

    <div class="playable-buttons">
      <input id="reset" type="button" value="Reset" />
    </div>
  </body>
  <script src="../playable.js"></script>
</html>
